<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
import {
  searchCategory,
  addcategory,
  upimage,
  searchByName
} from '/src/api/layout.js'
import { ref } from 'vue'
const getid = () => {
  thisid.value = route.params.id
  console.log(thisid.value)
}
const thisid = ref(0)
getid()
const total = ref(0)
const params = ref({
  pageNum: 1,
  pageSize: 9
})
const model = ref({
  name: null,
  pageNum: 1,
  pageSize: 9,
  categoryId: null
})
const ist = ref(false)
const searchdata = async () => {
  model.value.pageNum = params.value.pageNum
  model.value.pageSize = params.value.pageSize
  console.log(model.value)
  const res = await searchByName(model.value)
  needdata.value = res.data.records
  loading.value = false
  total.value = res.data.total
  if (total.value == 0) {
    ElMessage.error('没有商品')
    ist.value = false
  } else {
    ist.value = true
  }
}
const searchdata2 = async () => {
  await searchdata()
  if (ist.value) {
    ElMessage.success('搜索成功')
  }
}
const onSizeChange = (size) => {
  console.log('当前每页条数', size)
  params.value.pageNum = 1
  params.value.pageSize = size
  searchdata()
}
const onCurrentChange = (page) => {
  console.log('页码变化了', page)
  params.value.pageNum = page
  searchdata()
}
const options = ref([])
const needdata = ref([])
const dialogVisible = ref(false)
const formRef = ref()
const newcategory = ref({
  name: '',
  sort: '',
  image: '',
  description: ''
})
const getcategory = async () => {
  const res = await searchCategory()
  options.value = res.data
}
getcategory()
const loading = ref(false) //loading状态
const addgory = async () => {
  const res = await addcategory(newcategory.value)
  console.log(res)
  location.reload()
}
const deletew = async () => {
  model.value.categoryId = null
}
const onimage = async () => {
  const res = await upimage(fileToUpload.value)
  console.log(res)
  newcategory.value.image = res.data
}
const uploadRef = ref()
const fileToUpload = ref()
const imgUrl = ref()
const onUploadFile = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    imgUrl.value = reader.result
  }
  fileToUpload.value = file.raw
  console.log(fileToUpload.value)
}
searchdata()
</script>
<template>
  <page-header title="商品分类">
    <template #extra>
      <el-button type="primary" @click="dialogVisible = true"
        >添加分类</el-button
      >
    </template>
    <el-form inline :model="model">
      <el-form-item label="商品分类：">
        <el-select
          v-model="model.categoryId"
          placeholder="请选择"
          size="large"
          style="width: 200px"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-input
          v-model="model.name"
          style="width: 240px"
          placeholder="请输入你想搜素的商品名称"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchdata2()">搜索</el-button>
        <el-button @click="deletew">重置分类</el-button>
      </el-form-item>
    </el-form>
    <!-- 商品展示 -->
    <div class="goods-list" v-if="needdata.length" v-loading="loading">
      <goods-item
        v-for="item in needdata"
        :key="item.id"
        :id="item.id"
        :name="item.name"
        :price="item.price"
        :categoryName="item.categoryName"
        :image="item.image"
        :description="item.description"
        :sellerName="item.sellerName"
      ></goods-item>
    </div>
    <!-- 没有数据的显示和页数显示 -->
    <el-empty v-else description="没有数据" style="height: 600px" />
    <el-pagination
      v-model:current-page="params.pageNum"
      v-model:page-size="params.pageSize"
      :page-sizes="[6, 9, 12, 15]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </page-header>
  <!-- 添加分类弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="添加分类"
    width="800px"
    :before-close="handleClose"
  >
    <el-row>
      <el-col :span="6" :offset="3">
        <div style="">
          <el-upload
            ref="uploadRef"
            class="avatar-uploader"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="onUploadFile"
          >
            <img v-if="imgUrl" :src="imgUrl" class="avatar" />
            <img class="avatar" v-else src="@/assets/avatar.png" />
          </el-upload>
          <el-button
            type="success"
            :icon="Upload"
            size="large"
            @click="onimage"
            style="margin: 45px"
          >
            上传图片
          </el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <el-form
          :model="newcategory"
          :rules="rules"
          ref="formRef"
          label-width="50%"
          size="large"
          style="margin-left: auto; width: 400px"
        >
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="newcategory.name"></el-input>
          </el-form-item>
          <el-form-item label="分类排序" prop="sort">
            <el-input v-model="newcategory.sort"></el-input>
          </el-form-item>
          <el-form-item label="分类描述" prop="description">
            <el-input v-model="newcategory.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addgory">添加分类</el-button>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              确认
            </el-button>
          </div>
        </template>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<style lang="scss" scoped>
.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px;

  @media (max-width: 768px) {
    justify-content: center;
    gap: 0px;
    padding: 0px;
  }
}
img {
  height: 150px;
  width: 150px;
}
.avatar {
  height: 180px;
  width: 180px;
  border: 5px solid gray;
}
</style>
